<template>
  <div class="screen-box">
    <CommonInput class="item" v-model="queryParams.inputValue" titleName="输入框标题" width="180px" />
    <div class="item item-box">
      <span>单选下拉框</span>
      <CommonSelect v-model="queryParams.selectValue" :options="dropStore.demoOptions" width="180px" />
    </div>
    <div class="item item-box">
      <span>多选下拉框</span>
      <CommonSelect v-model="queryParams.selectValues" :options="dropStore.demoOptions" multiple collapse-tags collapse-tags-tooltip width="180px" />
    </div>
    <el-button type="primary" @click="query">查询</el-button>
  </div>
</template>

<script lang="ts" setup>
import CommonInput from '@/components/input/CommonInput.vue'
import CommonSelect from '@/components/select/CommonSelect.vue'
import { ref, type PropType } from 'vue'
import { useDropStore } from '@/store/modules/drop'

const dropStore = useDropStore()
const props = defineProps({
  getList: {
    type: Function as PropType<(params: any) => Promise<void>>,
    default: () => Promise.resolve()
  }
})

const queryParams = ref<any>({
  inputValue: '',
  selectValue: '',
  selectValues: []
})

const query = async () => {
  await props.getList(queryParams.value)
}

</script>

<style lang="scss" scoped>
 .screen-box {
  margin: 20px 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  line-height: 40px;
  .item {
    margin-right: 16px;
  }
  .item-box {
    display: flex;
    align-items: center;
    span {
      display: inline-block;
      font-size: 14px;;
      margin-right: 8px;
      width: 70px;
    }
  }
}
</style>
